 	<template>
	<view v-if="items.length <= 0">
		购物车空空如也,快去添加喜欢的商品
	</view>
  <view class="cart-box" v-else>
  <view v-for="(item,index) in items" :key="item.id" class="cart-item">
	   <evan-checkbox v-model="item.isChecked"></evan-checkbox>
	  <image :src="item.productPic"></image>
	  <view class="cart-text">
		  <view class="cart-text1"> {{item.productName}}</view>
		   <view class="cart-text2">编号:{{item.productSkuId}}</view>
		    <view class="cart-text3">价格:&#165{{item.price}}</view>
			 <view class="cart-text4">数量:{{item.quantity}}</view>
	  </view>
 <view class="right-content">
	 <view @tap="jian(index,item.id)"> -</view>
	  <view>{{item.quantity}}</view>
	   <view @tap="jia(index)"> +</view>
 </view>
 
  
  </view>
  <view class="bottom">
	  <evan-checkbox v-model="isAllChecked">全选</evan-checkbox>
	  <view class="all">合计:&#165{{all}}元</view>
	  <view class="pay" @tap="pay">结算</view>
  </view>
 
  </view>
</template>

<script>
	import checkLogins from "@/mixins/isLogin.js"

import{
	findAllCartItem,
	delCartItems,
	addPreOrder
}from "@/api/cart/index.js"
	export default {
		data() {
			return {
				
				items:[],
				
			}
		},
		mixins:[checkLogins],
		onShow() {
			
			if(this.checkLogin()){
				this.init()
			}else{
				uni.showToast({
					title:"请检查网络设置",
					icon:"none"
				})
			}
		},
		
		methods: {
		init(){
			findAllCartItem()
			.then(res=>{
				res.data.data.items.forEach(ele => ele.isChecked = false);
				this.items = res.data.data.items
				console.log(res)
			})
		},
		// 减号操作
		jian(index,id){
			var _this = this;
			if(this.items[index].quantity >1){
				this.items[index].quantity --;
			}else{
				uni.showModal({
					title:"是否继续?",
					content:"确定删除??????",
					success(res){
						console.log(res)
						if(res.confirm == true){
							var arr = [id];
							delCartItems(arr)
							.then(res =>{
								console.log(res)
								if(res.data.message =="成功"){
									uni.showToast({
										title:"已删除",
										icon:"none"
									})
									
								}
								// 删除完之后再次重新渲染页面
								_this.init()
							})
							
						}else{
							uni.showToast({
								title:"已取消",
								icon:"none"
							})
						}
					}
				})
				
			}
			console.log(index,id)
		},
		// 加号操作
		jia(index){
			this.items[index].quantity ++;
		},
		// 结算
		pay(){
			var list = this.items.filter(ele=>ele.isChecked);
			if(list.length<1){
				uni.showToast({
					title: "请先选择商品",
					icon: "none"
				})
				return 
			}
			var arr = [];
			list.forEach(ele=>{
				var obj ={
					cartId:ele.id,
					productId:ele.productId,
					productQuantity:ele.quantity,
					productSkuId:ele.productSkuId
				}
				arr.push(obj);
			})
			console.log("提交订单",arr)
			addPreOrder({
				orderItemList:arr
			}).then(res=>{
				console.log(res);
				if(res.message="成功"){
					uni.showToast({
						title: "购买成功，1s后进入确认订单界面",
						icon: "success"
					})
					var id = res.data.data.orderId;
					setTimeout(res =>{
						uni.navigateTo({
							url:`/pages/home/cart/order/order?id=${id}`
						})
					},1000)
				}
			})
		}
		
		},
		computed:{
			// 全选,反选
			isAllChecked:{
				get(){
					return this.items.every(ele =>ele.isChecked)
				},
				set(val){
					console.log(val)
					this.items.forEach(ele => ele.isChecked = val)
				}
				
			},
			// 累加
			all(){
				return this.items.reduce((total,current)=>{
					if(current.isChecked){
						return total + current.quantity * current.price
					}else{
						return total
					}
				},0)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart-box{
	.cart-item{
		position: relative;
		padding-bottom: 20px;
		display: flex;
		width: 90%;
		margin: 0 auto;
		image{
			display: block;
			width: 65px;
			height: 65px;
		}
	}
	.cart-text{
		font-size: 12px;
	}
}
// 底部
.bottom{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	position: fixed;
	left: 0;
	    bottom: 0;
		.pay{
			width: 80px;
			height: 20px;
			text-align: center;
			background-color: #2C405A;
			color: #FFFFFF;
			border: 1px #000000 solid;
		}
}
// 加减
.right-content{
	display: flex;
	position: absolute;
	right: 20px;
	bottom: 20px;
	view{
		width: 30px;
		height: 30px;
		border: 1px #606266 solid;
		font-size: 18px;
		border-radius: 8px;
		padding-left: 10px;
	}
}
</style>
